<template>
    <div class="box-content">
        <el-button type="primary" size="small" class="btn-add">新增</el-button>
        <el-table :data="dataList" style="width: 100%;margin-top:16px;" border class="table-box"
            :cell-style="tableCellClassName" v-loading="loadTable">
            <el-table-column align="center" label="序号" width="60">
                <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="本月关键结果">
                <template slot-scope="scope">
                    <span v-html="getTextToBr(scope.row.taskName)"></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="关键结果达成情况">
                <template slot-scope="scope">
                    <span v-html="getTextToBr(scope.row.taskDescription)"></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="执行人" width="80">
                <template slot-scope="scope">
                    {{ scope.row.batchExecutor }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="自评分" width="70">
                <template slot-scope="scope">
                    {{ scope.row.selfRating || 0 }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleEdit(scope)">编辑</el-button>
                    <el-button type="text" @click="handleDelete(scope)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            dialogType: 'new',
            dialogVisible: false
        }
    },
    props: {
        dataList: {
            type: Array,
            default: () => []
        },
    },
    methods: {
        getTextToBr(text) {
            return text ? text.replace(/\n/g, '<br />') : '--'
        },
        tableCellClassName({ row, column, rowIndex, columnIndex }) {
            let rowStyle = {}
            if (columnIndex == 4) {
                rowStyle.background = row.selfRating >= 0.7 ? '#d5ffe9' : row.selfRating >= 0.3 ? '#fff4d9' : '#ffe2e2'
            } else {
                rowStyle.background = '#fff'
            }
            return rowStyle
        },
        async handleEdit(scope) {
            await this.getEdit(scope)
        },
        getEdit(scope) {
            this.dialogType = 'edit'
            this.dialogVisible = true
            this.role = { ...scope.row }
        },
        handleDelete({ $index, row }) {
            this.$confirm('确认删除此条关键结果?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    // deleteTask(row.mainId).then(res => {
                    //     if (res.code === 200) {
                    //         this.$message({
                    //             type: 'success',
                    //             message: '操作成功!'
                    //         })
                    //         this.getTasks();
                    //     } else {
                    //         this.$message({
                    //             type: 'warning',
                    //             message: res.message
                    //         })
                    //         this.getTasks();
                    //     }
                    // })
                })
                .catch(err => { console.error(err) })
        },
    }
}
</script>
<style lang="scss" scoped>
.box-content {
    position: relative;
}

.btn-add {
    position: absolute;
    top: -44px;
    right: 0;
}
</style>